<template>
  <div class="measure-box">
    <div class="part">
      <div class="postion" v-for="(item, key) in position">
        <label
          ><span class="red" v-show="item.required">*</span
          >{{ item.title }}</label
        >

        <div class="input">
          <input
            v-model="values[key]"
            :placeholder="`请输入${item.title}`"
            @focus="() => focus(key)"
          />
        </div>
      </div>
    </div>
    <div class="part">
      <template v-if="inputIng">
        <div class="title">量体说明</div>
        <div class="img">
          <img v-lazy="publicUrl(position[inputIng].img)" :key="inputIng" />
        </div>

        <div class="text">
            {{ position[inputIng].describe }}
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { Position } from "@/interface";
import { publicUrl } from "@/utils/util";
type Values = { [key: keyof Position]: string };

interface Props {
  position?: Position;
  values?: Values;
}
const props = withDefaults(defineProps<Props>(), {
  position: () => {
    return {};
  },
  values: () => {
    return {};
  },
});

const initData = (data: Values): Values => {
  let key: keyof Position;
  let newVal: Values = {};
  for (key in props.position) {
    newVal[key] = data[key] ? data[key] : "";
  }

  return newVal;
};

const inputIng = ref<string>("");

const values = ref<Values>(initData(props.values));

const focus = (key: string | number) => {
  inputIng.value = key.toString();
};

</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
